<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>论坛</title>
    <script th:src="@{/airent/plugins/jquery/jquery.min.js}"></script>
    <script th:src="@{/airent/plugins/jquery-ui-1.12.1.custom/jquery-ui.min.js}"></script>
    <script th:src="@{/airent/plugins/bootstrap/bootstrap-4.4.1-dist/js/bootstrap.min.js}"></script>
    <link rel="stylesheet" th:href="@{/airent/plugins/bootstrap/bootstrap-4.4.1-dist/css/bootstrap.min.css}">
    <script  th:src="@{/airent/js/vue.js}"></script>


</head>
<body>
<!--        头部-->
<!-- 导航栏 -->

<a href="/postArticle.html">发帖</a>
<!--        头部结束-->
<div id="app" class="contain">
    <table class="table">
        <thead>
        <tr>
            <th scope="col">帖子标题</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="a in articles">
            <td><a href="/showOneAr.html" @click="getId(a.articleId)">{{a.articleTitle}}</a></td>
        </tr>

        </tbody>
    </table>

    <nav aria-label="Page navigation example">
        <ul class="pagination">
            <li class="page-item">
                <a class="page-link" href="#" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            <li class="page-item" v-for="i in pages"><a class="page-link" href="#" @click="go(i)">{{i}}</a></li>

            <li class="page-item">
                <a class="page-link" href="#" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>
</div>
<script>
    var vueApp = new Vue({
        el: "#app",
        data:{
            articles:{},
            pageSize:0,
            pageNum:0,
            pages:0
        },
        created(){
            let url = '/article/query'
            $.get(url,{
                status:1
            },function (data) {
                console.log(data)
                vueApp.articles = data.list
                vueApp.pageSize = data.pageSize
                vueApp.pageNum = data.pageNum
                vueApp.pages = data.pages
            })

        },
        methods:{
            go:function (num) {
                $.get('/article/query',{
                    pageNum:num,
                    status:1
                },function (data) {
                    vueApp.articles = data.list
                    vueApp.pageSize = data.pageSize
                    vueApp.pageNum = data.pageNum
                    vueApp.pages = data.pages
                })
            },
            getId:function(id) {
                window.localStorage.setItem("id", id);
            }
        }


    })
</script>


</body>
</html>